<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="box m1280 f f-j-b">
			<div class="left">
				<div class="topAva f f-a-c f-j-b">
					<div class="leftAva f f-a-c">
						<div class="imgAva"><img src="/src/assets/tou.png" alt="" /></div>
						<div class="name">
							<div class="names">Analytical Squad</div>
							<div class="fans">2.8k Fans</div>
						</div>
					</div>
					<div class="rigXin f f-a-c">
						<div @click="addInfo" class="hand hui f f-a-c"><img src="/src/assets/page/1.png" alt="" />27</div>
						<div class="hui f f-a-c"><img src="/src/assets/page/7.png" alt="" />hare</div>
					</div>
				</div>
				<div class="onty f f-a-c">
					<img src="/src/assets/tou.png" class="touAssImg" alt="" />
					<div class="month">Jane</div>
					<div class="monthXiao">Joined on May 10, 2023</div>
				</div>
				<!-- count -->
				<div class="countssss">
					The club where data and puns reign supreme! Whether you're a data nerd or simply curious about statistics, machine learning/artificial intelligence, and decision science, this is the place
					for you. Join our captivating data analytics journey!The club where data and puns reign supreme! Whether you're a data nerd or simply curious about statistics, machine learning/artificial
					intelligence, and decision science,
				</div>
				<div class="xian"></div>
				<div v-for="(item, index) in 6" :key="index" class="yarn f f-a-c f-j-b">
					<div class="leftCount">
						<div class="yarnNum">Aug 10, 2023</div>
						<div class="title">Mastering Datetime Manipulation in Python: A Comprehensive Guide (Asked in Interviews)</div>
						<div class="counts">
							In the fast-paced world we live in, time is a valuable and limited resource. To make the most of it, we must adopt effective productivity concepts that help us achieve our goals
							efficiently
						</div>
						<div class="f f-a-c">
							<div class="data">Data analytics</div>
							<div class="data">Data</div>
						</div>
					</div>
					<div class="imgBg"><img src="/src/assets/tou.png" alt="" /></div>
				</div>

				<!-- 分页器 -->
				<div style="margin-bottom: 80px" class="hand">
					<div class="example-pagination-block f f -a-c f-j-c">
						<el-pagination @size-change="sizeChange" @current-change="currentChange" layout="prev, pager, next" :total="1000" />
					</div>
				</div>
			</div>
			<div class="right">
				<div class="rigTop f f-d-c f-j-c f-a-c">
					<div class="top"><img src="/src/assets/tou.png" class="touImg" alt="" /></div>
					<div class="name">Ryan Amacher</div>
					<div class="emit">Investor, founder @Billz</div>
					<div class="address f f-a-c"><img src="/src/assets/page/8.png" alt="" />Location: Seattle | 18:30</div>
					<div class="topcs f f-j-c f-w-w f-a-c">
						<div class="topItem">Company culture building</div>
						<div class="topItem">Business branding</div>
						<div class="topItem">SaaS</div>
						<div class="topItem">Ed platform</div>
						<div class="topItem">VC</div>
					</div>
					<div class="ask hand">Ask on Xpert</div>
					<div class="count">
						My journey as an investor is characterized by an unyielding curiosity, a willingness to take calculated risks, and an unshakeable belief in the power of ingenuity to transform the world.
					</div>
				</div>
				<div class="rigBot">
					<div class="related">Related club</div>
					<div class="boxItem f f-a-c f-j-b">
						<div class="itemLef f f-a-c">
							<div><img src="/src/assets/tou.png" alt="" /></div>
							<div class="nei">
								<div class="name">Love data</div>
								<div class="time">10 articles <span>5k Fans</span></div>
							</div>
						</div>
						<div class="itemRig hand">Join</div>
					</div>
					<div class="boxItem f f-a-c f-j-b">
						<div class="itemLef f f-a-c">
							<div><img src="/src/assets/tou.png" alt="" /></div>
							<div class="nei">
								<div class="name">Love data</div>
								<div class="time">10 articles <span>5k Fans</span></div>
							</div>
						</div>
						<div class="itemRig hand">Join</div>
					</div>
					<div class="viewAll hand">View all</div>
				</div>
			</div>
		</div>
		<userModule ref="addRef" />
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import userModule from "./userModule.vue";
	let statusTab = ref(1);
	let addRef = ref("");
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	// 点击添加
	const addInfo = () => {
		addRef.value.dialogTableVisible = true;
	};
	const sizeChange = e => {};
	const currentChange = e => {};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
